<template>
    <li :data-id="diskData.id">
        <div class="cover">
            <img class="img" :src="diskData.picUrl">
            <a title="sleepless" href="/album?id=75816584" class="msk"></a>
            <a href="javascript:;" class="icon-play" title="播放" ></a>
        </div>

        <p class="disk-p overflow-space ">
            <a :title="diskData.name" href="/album?id=75816584" class="tit">{{diskData.name}}</a>
        </p>
        
        <p class="tit overflow-space" >
            <a class="fc666" href="#" v-for="artist in diskData.artists" :key="artist.id">{{artist.name+'/'}}</a>
        </p>
    </li>
</template>
<script>
export default {
    name: 'diskItem',
    props: {
        diskData: {
            type: Object,
            default: {}
           
        }
    },

    computed: {
        
    },
}
</script>
<style lang="scss" scoped>
    $coverall: url(../../../assets/images/coverall.png) no-repeat;
    $playIcon: url(../../../assets/images/iconall.png) no-repeat;
    $guide-dot: url(../../../assets/images/index.png) no-repeat;
    
    .msk, {
        background: $coverall;    
    }
    .icon-play{
        background: $playIcon;    
    }

    li{
        float: left;
        width: 118px;
        height: 150px;
        margin-left: 11px;
        background: $guide-dot;
        background-position: -260px 100px;
    }

    .cover{
        position: relative;
        width: 100px;
        height: 100px;
        margin-bottom: 7px;

        .img{
            display: block;
            width: 100%;
            height: 100%;
        }

        .msk{
            position: absolute;
            top: 0;
            left: 0;
            width: 118px;
            height: 100px;
            background-position: 0 -570px;
        }

        .icon-play{
            position: absolute;
            right: 10px;
            bottom: 5px;
            width: 22px;
            height: 22px;
            background-position: 0 -85px;
            display: none;
        }

        &:hover .icon-play{
            display: block;
        }
    }

    .tit{
        color: #000;

        &:hover{
            text-decoration: underline;
        }
    }

    .disk-p{
        width: 90%;
        line-height: 18px;
    }

    .fc666{
        color: #666;
    }
</style>

